<template>
	<view class="change-psw">
		<view class="title">设置新密码</view>
		<view class="content">
			<view class="c-item">
				<view class="c-item-title">手机号</view>
				<input class="c-item-input" v-model="dataObj.mobile" placeholder="请输入手机号" disabled />
			</view>
			<view class="c-item">
				<view class="c-item-title">旧密码</view>
				<input class="c-item-input" password v-model="dataObj.oldPsw" placeholder="请输入旧密码" />
			</view>
			<view class="c-item">
				<view class="c-item-title">新密码</view>
				<input class="c-item-input" password v-model="dataObj.newPsw" placeholder="请输入新密码" />
			</view>
			<view class="c-item">
				<view class="c-item-title">确认密码</view>
				<input class="c-item-input" password v-model="dataObj.confirmPsw" placeholder="请输入二次确认密码" />
			</view>
		</view>
		<view class="post-btn" @click="onPostTap">确定</view>
	</view>
</template>

<script>
	import { requestErrorTip, checkMobileReg } from '@/common/tools.js';
	
	export default {
		data() {
			return {
				dataObj: {
					mobile: '', // 手机号码
					oldPsw: '', // 旧密码
					newPsw: '', // 新密码
					confirmPsw: '' // 确认密码
				}
			}
		},
		onLoad() {
			const data = uni.getStorageSync('userInfo');
			this.dataObj['mobile'] = data['mobile'];
		},
		methods: {
			// 确定
			onPostTap() {
				this.checkField(() => {
					const data = this.dataObj;
					this.$Requset({
						url: this.$Api['account']['changePwd'],
						data: {
							mobile: data['mobile'],
							newpwd: data['newPsw'],
							repwd: data['confirmPsw'],
							oldpwd: data['oldPsw']
						},
						success: (res) => {
							const { data, status } = res;
							if (!status) {
								requestErrorTip('toast', '修改登陆密码失败，请重新修改！');
								return;
							}
							requestErrorTip('toast', '修改登陆密码成功！');
							// 清除token
							uni.removeStorageSync('token');
							// 清除用户信息
							uni.removeStorageSync('userInfo');
							setTimeout(() => {
								uni.redirectTo({
									url: '/pages/account/login'
								});
							}, 1000);
						},
						// complete: () => {
						// 	// setTimeout(function() {
						// 	// 	uni.hideLoading();
						// 	// 	that.loading = false;
						// 	// }, 500);
						// },
						fail: (err) => {
							console.log(err);
						}
					})
				})
			},
			checkField(cb) {
				const data = this.dataObj;
				if (data['mobile'] === '') {
					requestErrorTip('toast', '请输入手机号');
					return false;
				}
				if (!checkMobileReg(data['mobile'])) {
					requestErrorTip('toast', '请输入正确的手机号');
					return false;
				}
				if (data['oldPsw'] === '') {
					requestErrorTip('toast', '请输入旧密码');
					return false;
				}
				if (data['newPsw'] === '') {
					requestErrorTip('toast', '请输入新密码');
					return false;
				}
				if (data['newPsw'].length < 6) {
					requestErrorTip('toast', '请输入长度至少6位的新密码');
					return false;
				}
				if (data['confirmPsw'] === '') {
					requestErrorTip('toast', '请输入确认密码');
					return false;
				}
				if (data['newPsw'] !== data['confirmPsw']) {
					requestErrorTip('toast', '新密码和确认密码不一致');
					return false;
				}
				cb && cb();
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #FFFFFF;
	}
	.change-psw{
		padding: 54rpx 50rpx;
		.title{
			line-height: 56rpx;
			font-size: 40rpx;
			color: #1A1A1A;
			margin-bottom: 54rpx;
		}
		.content{
			margin-bottom: 44rpx;
			.c-item{
				position: relative;
				height: 80rpx;
				border: 1rpx solid #EAEFF1;
				border-radius: 40rpx;
				padding-left: 162rpx;
				margin-bottom: 22rpx;
				&-title{
					position: absolute;
					top: 0;
					left: 0;
					width: 162rpx;
					height: 80rpx;
					line-height: 80rpx;
					font-size: 30rpx;
					color: #373737;
					text-align: center;
				}
				&-input{
					height: 80rpx;
					line-height: 80rpx;
					font-size: 30rpx;
					color: #373737;
				}
			}
			.verification{
				padding-right: 200rpx;
				.verification-btn{
					position: absolute;
					top: 0;
					right: 0;
					width: 180rpx;
					height: 80rpx;
					line-height: 80rpx;
					font-size: 30rpx;
					color: $color-common;
				}
			}
		}
		.post-btn{
			height: 82rpx;
			line-height: 82rpx;
			font-size: 32rpx;
			color: #FFFFFF;
			text-align: center;
			border-radius: 41rpx;
			background-color: $color-common;
			margin-bottom: 24rpx;
		}
	}
</style>
